<template>
  <div class="editor">
    <div class="editor-toolbar">
      <ul class="editor-mode pull-right">
        <!-- <li class="preview pull-right"><i class="fa fa-eye"></i><span>预览</span></li>
        <li class="editing pull-right on"><i class="fa fa-edit"></i><span>编辑</span></li> -->
      </ul>
    </div>
    <div class="editor-con clearfix">
      <textarea :placeholder="editor_placeholder" :value="input" @input="update"></textarea>
      <div class="compiledMarkdown" v-html="compiledMarkdown"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['editor_placeholder'],
    data() {
      return {
        input: '',
      };
    },
    computed: {
      compiledMarkdown: function () {
        return marked(this.input, { sanitize: true })
      }
    },
    methods: {
      update: _.debounce(function (e) {
        this.input = e.target.value
        this.$emit('input-change', this.input)
      }, 300)
    }
  }
</script>

<style @scoped lang="less">
  .editor {
    position: relative;
    z-index: 1;
    min-height: 300px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 4px;

    .editor-toolbar {
      background-color: #fff;
      width: 100%;
      height: 30px;
      border-bottom: 1px solid #ccc;
      .editor-mode {
        height: 30px;
        margin-bottom: 0;
      }

      .editor-mode li {
        cursor: pointer;
        height: 29px;
        line-height: 29px;
        padding: 0 5px;
        color: #353535;
      }

      .editor-mode li:hover {
        color: #787d82;
      }

      .editor-mode li.on {
        background-color: #f6f6f6;
        color: #2eb71a;
      }

      .editor-mode li i {
        margin-right: 3px;
      }
    }

    .editor-con {
      position: relative;
      textarea,
      .compiledMarkdown {
        width: 49%;
        vertical-align: top;
        box-sizing: border-box;
        overflow: hidden;
        background-color: #FFF;
        height: auto;
        min-height: 500px;
      }

      textarea {
        padding: 20px;
        float: left;
        border: none;
        border-right: 1px solid #ccc;
        resize: none;
        outline: none;
        background-color: #f6f6f6;
        font-size: 14px;
        font-family: 'Monaco', courier, monospace;
      }

      .compiledMarkdown {
        padding: 0 20px;
        float: right;
        text-align: left;
      }

      code {
        color: #f66;
      }
    }
  }
</style>